<template>
	<view class="page" :style="{ backgroundImage: 'url(' + backgroundUrl + ')' }">
		<view class="form-wrapper">
			<view class="form" @click="animateOpacity" :style="{ opacity: formOpacity }">
				<view class="inputs_button">
					<view class="inputs">
						<view class="account">
							<input type="number" v-model="phone" :adjust-position="false" placeholder="手机号" />
						</view>
						<view class="vcode" style="margin-top: 30rpx;">
							<input type="number" v-model="vcode" :adjust-position="false" placeholder="验证码" />
							<text v-if="vcodeTime == 0" style="color:#3264ed" @click="getVcode">获取验证码</text>
							<text v-else style="color:#ccc">重新获取({{ vcodeTime }}s)</text>
						</view>
						<view class="password" style="margin-top: 30rpx;">
							<input :type="pwdShow ? 'text' : 'password'" v-model="password" :adjust-position="false"
								placeholder="密码" />
							<uni-icons :type="pwdShow ? 'eye-filled' : 'eye-slash-filled'" size="24" color="#cccccc"
								@click="pwdShow = !pwdShow"></uni-icons>
						</view>
						<view class="confirm-password" style="margin-top: 30rpx;">
							<input :type="confirmPwdShow ? 'text' : 'password'" v-model="confirmPassword"
								:adjust-position="false" placeholder="确认密码" />
							<uni-icons :type="confirmPwdShow ? 'eye-filled' : 'eye-slash-filled'" size="24"
								color="#cccccc" @click="confirmPwdShow = !confirmPwdShow"></uni-icons>
						</view>
					</view>
					<view class="button" style="margin-top: 60rpx;">
						<view @click="submitRegister">
							注册
						</view>
					</view>
				</view>
				<view class="login-link" @click="toLogin">
					已有账号？点此登录
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const phone = ref('')
const password = ref('')
const confirmPassword = ref('')
const vcode = ref('')
const pwdShow = ref(false)
const confirmPwdShow = ref(false)
const vcodeTime = ref(0)
const vcodeTimer = ref<number | null>(null)
const backgroundUrl = `${import.meta.env.VITE_API_BASE_URL}/register/CampusRegistration.png`
const formOpacity = ref(0.8)
const isAnimating = ref(false)

const animateOpacity = () => {
	if (isAnimating.value) return
	isAnimating.value = true
	formOpacity.value = 1

	// 动画结束后恢复状态（可选）
	setTimeout(() => {
		isAnimating.value = false
	}, 300) // 动画持续时间匹配 CSS 过渡时间
}
// 获取验证码方法
const getVcode = () => {
	vcodeTime.value = 60
	vcodeTimer.value = setInterval(() => {
		if (vcodeTime.value > 0) {
			vcodeTime.value--
		} else {
			clearInterval(vcodeTimer.value)
			vcodeTimer.value = null
		}
	}, 1000)
}

// 提交注册
const submitRegister = () => {
	if (password.value !== confirmPassword.value) {
		uni.showToast({
			title: '两次输入的密码不一致',
			icon: 'none'
		})
		return
	}
	uni.showToast({
		title: '注册成功',
		icon: 'none'
	})
	// TODO: 实际调用注册接口
}

// 跳转登录页
const toLogin = () => {
	uni.navigateTo({
		url: '/pages/login/login'
	})
}
</script>
<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background-size: cover;
	display: flex;
	align-items: center; // 垂直居中
	justify-content: center; // 水平居中
	padding: 40rpx 0;
}

.form-wrapper {
	width: 90%;
	max-width: 600px;
	margin: 0 auto;
}

.form {
	border-radius: 40rpx;
	background-color: #fff;
	overflow: hidden;
	transition: opacity 0.3s ease-in-out;
	padding: 40rpx 0;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.inputs_button {
	background-color: #fff;

	.inputs {
		padding: 0 32rpx;

		.account,
		.password,
		.confirm-password,
		.vcode {
			height: 96rpx;
			border-radius: 20rpx;
			padding: 0 48rpx;
			display: flex;
			align-items: center;
			background-color: #f7fafc;

			input {
				flex: 1;
			}
		}
	}

	.button {
		padding: 0 32rpx;
		margin-top: 60rpx;

		view {
			line-height: 96rpx;
			border-radius: 20rpx;
			text-align: center;
			font-size: 32rpx;
			background-color: #3264ed;
			color: #fff;
		}
	}
}

.login-link {
	margin-top: 40rpx;
	text-align: center;
	font-size: 28rpx;
	color: #3264ed;
	padding-bottom: 60rpx;
}
</style>